<template>
   <el-card v-loading="loading">
       <template #header>
           <span>添加用户</span>
       </template>
        <!-- ref="form":对当前对象的获取，通过$获取当前对象 -->
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
           <el-form-item label="用户名" prop="username">
               <el-input v-model="form.username"></el-input>
           </el-form-item>
           <el-form-item label="密码" prop="password">
               <el-input v-model="form.password" type="password"></el-input>
           </el-form-item>
           <el-form-item label="确认密码" prop="confirmPassword">
               <el-input v-model="form.confirmPassword" type="password"></el-input>
           </el-form-item>
           <el-form-item label="性别">
               <el-radio v-model="form.gender" label="m">男</el-radio>
               <el-radio v-model="form.gender" label="f">女</el-radio>
           </el-form-item>
           <el-form-item label="手机" prop="phone">
               <el-input v-model="form.phone"></el-input>
           </el-form-item>
           <el-form-item label="邮箱" prop="email">
               <el-input v-model="form.email"></el-input>
           </el-form-item>
           <el-form-item>
               <el-button type="primary" @click="add()">立即创建</el-button>
               <el-button @click="back()">返回</el-button>
           </el-form-item>
       </el-form>
   </el-card>
</template>

<script>
export default {
  data() {
      const isUserSame = async (rule,value,callback)=>{
        var {data}=await this.axios({
             method:'get',
             url:`/users/exists/username/${value}`
         });
         if(data){
             callback(new Error('用户名重复'))
         }else{
             callback();
         }
      };
      const isPhoneSame = async (rule,value,callback)=>{
        var {data}=await this.axios({
             method:'get',
             url:`/users/exists/phone/${value}`
         });
         if(data){
             callback(new Error('手机号已存在'))
         }else{
             callback();
         }
      };
      const isEmailSame = async (rule,value,callback)=>{
        var {data}=await this.axios({
             method:'get',
             url:`/users/exists/email/${value}`
         });
         if(data){
             callback(new Error('邮箱已存在'))
         }else{
             callback();
         }
      };
    return {
      loading:false,  
      form: {
        username: "",
        gender: "m",
        phone: "",
        email: "",
        confirmPassword: ""
      },
      rules: {
        username: [
          { required: true, message: "用户名必须填写！", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
          {validator:isUserSame}
        ],
        password: [
          { required: true, message: "密码必须填写！", trigger: "blur" },
          { min: 6, max: 18, message: "长度在 6 到 18 个字符", trigger: "blur" }
        ],
        confirmPassword: [
          { required: true, message: "请确认密码", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (value == this.form.password) {
                callback();
              } else {
                callback(new Error("两次密码不一致"));
              }
            }
          }
        ],
        phone: [
          { required: true, message: "手机必须填写！" },
          {
            validator: (rule, value, callback) => {
              if (/^[1]([3-9])[0-9]{9}$/.test(value)) {
                callback();
              } else {
                callback(new Error("手机格式错误"));
              }
            }
          },
          {validator:isPhoneSame}
        ],
        email: [
          { required: true, message: "邮箱必须填写！" },
          { type:'email', message: "邮箱格式错误" },
          {validator:isEmailSame}
        ]
      }
    };
  },
  methods: {
   async add() {
       await this.$refs.form.validate((flag)=>{
            if(!flag){return;}
            this.loading=true;
            this.axios({
                method:'post',
                url:'/users/add',
                data:{
                    username:this.form.username,
                    password:this.form.password,
                    gender:this.form.gender,
                    phone:this.form.phone,
                    email:this.form.email,
                }
            });
            this.loading=false;
            this.$message.success('添加成功');
            this.$refs.form.resetFields();
        })
    },
    back() {
      this.$router.push({ path: "home/users" });
    }
  }
};
</script>

